<script setup>
import { ref, reactive } from "vue";
import {
  projectListService,
  projectListParamService,
  deleteProjectService,
  addProjectService,
  updateProjectService,
} from "@/api/projectAPI";
import { Delete, Edit } from "@element-plus/icons-vue";

// 校验必填项
const formRef = ref(null);

// 定义弹窗显示
const dialogFormVisible = ref(false);

//定义列表数据
const projectList = ref([]);
//获取列表
const getProjectList = async function () {
  let data = await projectListService();
  projectList.value = data.data;
};
// 触发列表运行
getProjectList();

// 定义查询数据
const condations = ref({
  projectName: "",
  username: "",
});

// 查询操作
const submit = async function () {
  let data = await projectListParamService(condations.value);
  projectList.value = data.data;
};

//重置操作
const reset = function () {
  condations.value = {
    projectName: "",
    username: "",
  };

  getProjectList();
};

// 删除操作
const deleteProject = function (projectId) {
  ElMessageBox.confirm("请确认是否要删除?", "提示：", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(projectId);
      deleteProjectService({ projectId: projectId });
      setTimeout(() => {
        getProjectList();
      }, 500);

      ElMessage({
        type: "success",
        message: "确认删除",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const addOrEidt = ref({
  tag: false,
  title: "",
});

// 弹窗数据
const form = reactive({
  name: "",
  description: "",
});

// 添加操作
const add = () => {
  form.name = "";
  form.description = "";
  form.id = "";
  dialogFormVisible.value = true;
  addOrEidt.value.title = "添加项目";
  addOrEidt.value.tag = true;
};

// 新增操作
const addProject = function () {
  if (addOrEidt.value.tag) {
    addProjectService(form);
  } else {
    updateProjectService(form);
  }

  dialogFormVisible.value = false;
  setTimeout(() => {
    getProjectList();
  }, 500);
};

// 修改操作
const updateProject = function (value) {
  addOrEidt.value.title = "编辑项目";
  dialogFormVisible.value = true;
  form.name = value.name;
  form.description = value.description;
  form.username = value.username;
  form.id = value.id;
  addOrEidt.value.tag = false;
};
</script>
<template>
  <div class="project-view">
    <div>
      <el-form :inline="true" :model="condations" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="condations.projectName" placeholder="项目名称" clearable />
          <el-input v-model="condations.username" placeholder="创建人" clearable />
          <el-button type="primary" @click="submit">查询</el-button>
          <el-button @click="reset" type="info" round>重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="add" type="primary" round><el-icon>
              <CirclePlus />
            </el-icon>新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table :data="projectList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="username" label="创建人" />
        <el-table-column prop="createTime" label="创建时间">
          <template v-slot="scope">
            {{ formatDate(scope.row.createTime, "YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template v-slot="scope">
            {{ formatDate(scope.row.updateTime, "YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="120">
          <template v-slot="scope">
            <el-button @click="updateProject(scope.row)" type="primary" :icon="Edit" circle />
            <el-button @click.prevent="deleteProject(scope.row.id)" type="danger" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" :title="addOrEidt.title" width="500">
      <el-form :model="form" ref="formRef">
        <el-form-item label="项目名称" :rules="[
          { required: true, message: '请输入项目名称!', trigger: 'blur' },
        ]">
          <el-input v-model="form.name" aria-placeholder="项目名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="form.description" autocomplete="off" aria-placeholder="项目描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addProject"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.project-view {
  width: 100%;
  margin-right: 30px;
}

.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.table-container {
  width: 100%;
}
</style>
